<template>
	<view class="detail-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :class="getStatueClass(billInfo.statue)">
			<u-icon name="checkmark-circle" color="#ffffff" size="40" v-if="billInfo.statue === 3"></u-icon>
			<u-icon name="clock" color="#ffffff" size="40" v-else></u-icon>
			<text>{{ getStatueName(billInfo.statue) }}</text>
		</view>

		<!-- 采购基本信息 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">采购单信息</text>
				<view class="card-id">单号：{{ billInfo.billCode }}</view>
			</view>
			<view class="info-item">
				<text class="label">采购标题：</text>
				<text class="value">{{ billInfo.title }}</text>
			</view>
			<view class="info-item">
				<text class="label">采购日期：</text>
				<text class="value">{{ billInfo.billDate }}</text>
			</view>
			<view class="info-item">
				<text class="label">采购单位：</text>
				<text class="value">{{ billInfo.enterpName }}</text>
			</view>
			<view class="info-item">
				<text class="label">创建人员：</text>
				<text class="value">{{ billInfo.creatorUserName }}</text>
			</view>
			<view class="info-item">
				<text class="label">创建时间：</text>
				<text class="value">{{ billInfo.creatorTime }}</text>
			</view>
			<view class="info-item" v-if="billInfo.summary">
				<text class="label">备注说明：</text>
				<text class="value">{{ billInfo.summary || '无' }}</text>
			</view>

			<!-- 采购总金额 -->
			<view class="total-amount">
				<text>采购总金额：</text>
				<text class="amount">¥{{ billInfo.costAmt }}</text>
			</view>
		</view>

		<!-- 采购物品列表 -->
		<view class="product-card">
			<view class="card-header">
				<text class="card-title">采购物品明细</text>
				<text class="product-count">共{{ billInfo.productList.length || 0 }}项</text>
			</view>

			<view class="product-list">
				<view class="product-item" v-for="(item, index) in billInfo.productList" :key="item.id">
					<view class="product-header">
						<view class="product-name">
							<text class="name">{{ item.productName }}</text>
							<text class="code">({{ item.productCode }})</text>
						</view>
						<view class="category">{{ item.categoryName }}</view>
					</view>

					<view class="product-detail">
						<view class="product-info">
							<view class="spec-item">
								<text class="spec-label">单价：</text>
								<text class="spec-value">¥{{ item.defaultPrice }}</text>
							</view>
							<view class="spec-item">
								<text class="spec-label">数量：</text>
								<text class="spec-value">{{ item.qty }} {{ item.unit }}</text>
							</view>
						</view>
						<view class="product-amount">
							<text>金额：</text>
							<text class="amount">¥{{ item.costJe }}</text>
						</view>
					</view>

					<view class="product-remark" v-if="item.summary">
						<text class="remark-label">备注：</text>
						<text class="remark-content">{{ item.summary }}</text>
					</view>

					<view class="divider" v-if="index !== billInfo.productList.length - 1"></view>
				</view>
			</view>
		</view>

		<!-- 审批流程 -->
		<view class="approval-card" v-if="billInfo.applroveProList.length>0">
			<view class="card-header">
				<text class="card-title">审批流程</text>
			</view>

			<view class="approval-list">
				<view class="approval-item" v-for="(item, index) in billInfo.applroveProList" :key="item.id">
					<view class="approval-status-line">
						<view class="status-dot" :class="item.auidStatue === 1 ? 'approved' : 'pending'"></view>
						<view class="status-line" v-if="index !== billInfo.applroveProList.length - 1"></view>
					</view>

					<view class="approval-content">
						<view class="approval-header">
							<text class="approval-title">{{ item.process }}</text>
							<view class="approval-status" :class="item.auidStatue === 1 ? 'approved' : 'pending'">
								{{ item.auidStatue === 1 ? '已审批' : '待审批' }}
							</view>
						</view>

						<view class="approval-info">
							<text class="approval-person">{{ item.userName }}</text>
							<text class="approval-date" v-if="item.auidStatue === 1">
								{{ item.creatorTime }}
							</text>
						</view>

						<view class="approval-remark" v-if="item.auidSummary">
							<text>审批意见：{{ item.auidSummary || '无' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部提交采购按钮，只有在待提交状态显示 -->
		<view class="submit-area" v-if="billInfo.statue === 0">
			<view class="button-group">
				<u-button class="submit-button" type="primary" @click="submitPurchase">提交采购申请</u-button>
				<!-- <u-button class="edit-button" type="info" @click="editPurchase">编辑</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				billInfo: {
					billId: "",
					billCode: "",
					billDate: "",
					title: "",
					statue: 0,
					costAmt: 0,
					enterpName: "",
					summary: "",
					creatorTime: "",
					creatorUserName: "",
					productList: [],
					applroveProList: []
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				console.log(options.id)
				this.billId = options.id
				this.getBillDetail(options.id)
			}
		},
		methods: {
			getBillDetail(id) {
				this.$u.api.applyInfo({
					id: this.billId
				}).then(res => {
					this.billInfo = res.data
				})
			},
			addReserve() {
				uni.navigateTo({
					url: `/pages/meeting/myreserve/AddForm`
				})
			},
			// 编辑采购
			editPurchase() {
				uni.navigateTo({
					url: `/pages/purch/applytbill/AddForm?billId=${this.billInfo.billId}`
				})
			},
			// 提交采购申请
			submitPurchase() {
				uni.showModal({
					title: '确认提交',
					content: '确定要提交此采购申请吗？提交后将进入审批流程。',
					success: res => {
						if (res.confirm) {
							// 显示加载中
							uni.showLoading({
								title: '提交中...'
							})

							this.$u.api.auidStatue({
								billId: this.billInfo.billId,
								statue:1
							}).then(res => {
								uni.hideLoading()
								
								if (res.code === 200) {
									uni.showToast({
										title: '提交成功',
										icon: 'success'
									})
									
									// 重新加载详情
									setTimeout(() => {
										this.getBillDetail(this.billId)
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg || '提交失败',
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.hideLoading()
								uni.showToast({
									title: '提交失败，请稍后重试',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			getStatueName(statue) {
				// 获取状态文本
				switch (statue) {
					case 0:
						return '待提交'
					case 1:
						return '待审批'
					case 2:
						return '审批中'
					case 3:
						return '已通过'
					case -1:
						return '已驳回'
					default:
						return '未知状态'
				}
			},
			getStatueClass(statue) {
				// noapply pending approving approved rejected
				// 获取状态文本
				switch (statue) {
					case 0:
						return 'noapply'
					case 1:
						return 'pending'
					case 2:
						return 'approving'
					case 3:
						return 'approved'
					case -1:
						return 'rejected'
					default:
						return 'noapply'
				}
			}
		}
	}
</script>

<style lang="scss">
	.detail-container {
		min-height: 100vh;
		background-color: #f5f6fa;
		padding-bottom: 30rpx;
		position: relative;
		padding-bottom: 120rpx; /* 为底部按钮留出空间 */
	}

	/* 状态栏样式 */
	.status-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 180rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		
		&.rejected {
			background: linear-gradient(135deg, #ff4f6f, #ff2b47);
		}

		&.approved {
			background: linear-gradient(135deg, #4cd964, #39b54a);
		}

		&.approving {
			background: linear-gradient(135deg, #55aaff, #525bff);
		}

		&.pending {
			background: linear-gradient(135deg, #ffc107, #ff9900);
		}
		
		&.noapply {
			background: linear-gradient(135deg, #63b7be, #27b2be);
		}
		
		text {
			margin-top: 10rpx;
		}
	}

	/* 卡片样式 */
	.info-card,
	.product-card,
	.approval-card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.card-id {
		font-size: 24rpx;
		color: #666;
	}

	/* 基本信息样式 */
	.info-item {
		display: flex;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.label {
		color: #666;
		min-width: 180rpx;
	}

	.value {
		color: #333;
		flex: 1;
	}

	.total-amount {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		font-size: 28rpx;

		.amount {
			font-size: 36rpx;
			font-weight: bold;
			color: #f56c6c;
			margin-left: 10rpx;
		}
	}

	/* 产品列表样式 */
	.product-count {
		font-size: 24rpx;
		color: #666;
	}

	.product-item {
		position: relative;
		padding: 20rpx 0;
	}

	.divider {
		height: 1px;
		background-color: #f5f5f5;
		margin: 20rpx 0;
	}

	.product-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.product-name {
		display: flex;
		align-items: center;

		.name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.code {
			font-size: 24rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}

	.category {
		font-size: 24rpx;
		color: #666;
		background-color: #f2f6fc;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}

	.product-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.product-info {
		display: flex;
	}

	.spec-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		font-size: 26rpx;
	}

	.spec-label {
		color: #666;
	}

	.spec-value {
		color: #333;
	}

	.product-amount {
		font-size: 26rpx;
		color: #666;

		.amount {
			color: #f56c6c;
			font-weight: bold;
		}
	}

	.product-remark {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 审批流程样式 */
	.approval-list {
		position: relative;
		padding: 10rpx 0;
	}

	.approval-item {
		display: flex;
		position: relative;
		margin-bottom: 20rpx;
	}

	.approval-status-line {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		width: 40rpx;
	}

	.status-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-top: 10rpx;

		&.approved {
			background-color: #4cd964;
		}

		&.pending {
			background-color: #ddd;
			border: 2rpx solid #ccc;
		}
	}

	.status-line {
		flex: 1;
		width: 2rpx;
		background-color: #ddd;
		margin: 5rpx 0;
	}

	.approval-content {
		flex: 1;
	}

	.approval-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.approval-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.approval-status {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;

		&.approved {
			background-color: #e8f5e9;
			color: #4cd964;
		}

		&.pending {
			background-color: #f5f5f5;
			color: #999;
		}
	}

	.approval-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
		font-size: 26rpx;
	}

	.approval-person {
		color: #666;
	}

	.approval-date {
		color: #999;
		font-size: 24rpx;
	}

	.approval-remark {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		background-color: #f9f9f9;
		padding: 10rpx 16rpx;
		border-radius: 8rpx;
	}
	
	/* 底部提交区域样式 */
	.submit-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}
	
	.button-group {
		display: flex;
		justify-content: space-between;
	}
	
	.submit-button {
		flex: 2;
		margin-right: 20rpx;
		background: linear-gradient(45deg, #2979ff, #3e8df7);
		box-shadow: 0 2px 5px rgba(41, 121, 255, 0.2);
	}
	
	.edit-button {
		flex: 1;
		background: linear-gradient(45deg, #909399, #a7abb2);
	}
</style>
